import React from 'react'
import styles from './css/Index.module.css'
function Index() {
  const arr=[
    {
      image:'https://ts4.tc.mm.bing.net/th?id=ORMS.e017be319ad086366b9c510395878c65&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.5&p=0',
      title:'深圳一店招工要求每天上班16小时，月休仅两天，门店负责人：你情我愿的事不勉强'
    },
    {
      image:'https://ts4.tc.mm.bing.net/th?id=ORMS.78b5e8a93f975e47e07c5659371e1250&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.5&p=0',
      title:'泡泡玛特称成都LABUBU涂鸦墙涉侵权 网友：打卡涂鸦墙作品已被下架'
    },
    {
      image:'https://ts4.tc.mm.bing.net/th?id=ORMS.7faf57c588a7568fe6180ae6c81a70f3&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.5&p=0',
      title:'超百万充电宝召回始末：一家供应商"引爆"全行业'
    },
    {
      image:'https://ts2.tc.mm.bing.net/th?id=ORMS.059259fef2d472e84e73163edd283cfa&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.5&p=0',
      title:'渣土车凌晨撞进家里，车主：真的是拿不出钱'
    },
     {
      image:'https://ts2.tc.mm.bing.net/th?id=ORMS.eb6785d3bbdc924ffa018e7b1a07f7d9&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.5&p=0',
      title:'网友拍下汽车开上成都天府绿道行驶 管理方：正在核实情况'
    }
  ]
  return (
    <div>
      <div>
        {/* 渲染数据 */}
        {
          arr.map((item,index)=>{
            return <div key={index} className={styles.box}>
                <div className={styles.left}>
                  <img src={item.image} alt="" />
                  <div>
                    <span>{item.title}</span>
                    <p>{"查看更多>"}</p>
                  </div>
                  
                </div >
                <div className={styles.right}>
                  <span>7961685</span><br />
                  <span>热搜指数</span>
                </div>
            </div>
          })
        }
      </div>
      
    </div>
  )
}

export default Index
